<template>
  <div>
    <el-dialog
    title="VR预览"
    width="70%"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="visible">
    <div :id="vrId" style="width: 100%;  overflow: hidden;" v-bind:style="bodyStyle">
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <!-- <el-button type="primary" @click="doSubmit()">确定</el-button> -->
    </span>
  </el-dialog>
  </div>
</template>
<script>
  import * as JFMAP from './hmap.manage.js'
  export default {
    props: {
      type: String,
      bodyStyle:  {
        type: Object,
        default: () => {
          return {
            height: '400px'
          }
         }
      }
    },
    data () {
      return {
        visible: false,
        vrManager: null,
        vrId: 'selectPoint_' + Math.random().toString(36).substr(2)
      }
    },
    beforeDestroy () {
      if (this.vrManager) {
        this.vrManager.destroy()
        this.vrManager = null
      }
    },
    methods: {
      showVr (imgUrl) {
        this.visible = true
        if (this.vrManager) {
          this.vrManager.destroy()
          this.vrManager = null
        }
        this.$nextTick(()=>{
          this.vrManager = new JFMAP.JfVR( '', this.vrId, {
          	showaxes: true,
          	effectiveDistance: 30, 	// 现实距离30米内，认为有效，可展示VR地图
          	cameraHeight: 1.125,    // 摄像机拍摄的高度，1.125米
          	path: {
          		url: "https://xcfiles.oss-cn-shanghai.aliyuncs.com/szgt/img/vrblue_path.png", //路线图片
          		width: 1.8, //路宽
          	},
          	scaleMap: {
          		'': 15.86 //比例尺为 1：1000（米） 地图距离：实际距离  104.67:6.6
          	}
          });
          this.vrManager.showVrImg(imgUrl, 0)
        })
      },
      doSubmit () {
        this.visible = false
      }
    }
  }
</script>

<style>
</style>
